<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >

      <div class="top">
        <el-select v-model="select_config" placeholder="选择" size="small" filterable clearable @change="handleChangeSelection">
          <el-option label="所有" value="" />
          <el-option
            v-for="item in configs"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button v-if="select_config !== ''" type="primary" icon="el-icon-edit" @click="handleSearch">刷新</el-button>
        <iframe v-show="iframeState" id="show-iframe" frameborder="0" name="showHere" scrolling="auto" :src="iframesrc"><h1>测试一下</h1></iframe>
      </div>
      <div v-if="select_row">
        <el-tag>{{ this.select_row.conversion_tracking_id }}</el-tag>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Get, GetIframe } from '@/api/prestashop/googleadvconfig'
import qs from 'qs'

export default {
  name: 'Sendgoogleconversion',
  props: ['showDialog', 'product_id'],
  data() {
    return {
      iframesrc: '',
      iframeState: false,
      dialogVisible: false,
      select_config: '',
      select_row: '',
      title: '发送转化代码',
      configs: [],
      innerDialogVisible: false
    }
  },
  watch: {
    showDialog(v) {
      this.dialogVisible = v
      if (v) {
        this.getList()
      }
    }
  },
  methods: {
    handleChangeSelection(val) {
      this.configs.forEach(item => {
        if (item.id === val) {
          this.select_row = item
          console.log(this.select_row)
          const s = document.createElement('script')
          s.type = 'text/javascript'
          s.src = 'https://www.googletagmanager.com/gtag/js?id=' + item.conversion_tracking_id
          document.body.appendChild(s)
          this.iframeState = true
          GetIframe({ product_id: this.product_id, config_id: item.id }).then(response => {
            console.log(response)
          })
          // this.iframesrc = 'http://localhost:5000/erp/api/getgoogleadviframe/?product_id=' + this.product_id + '&config_id=' + item.id
        }
      })
    },
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        product_id: this.product_id,
        kw: '',
        website_id: ''
      }))
        .then(response => {
          this.configs = response.data.data
        }).catch(err => {
          console.log(err)
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },

    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeMyDialog', false)
    }
  }
}

</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
